import { useState } from 'react'
import './App.less'
import { Button } from 'antd';
import axios from 'axios';
import '@ant-design/v5-patch-for-react-19';
import Counter from './features/counter/Counter';
import Heading from './Heading.jsx';
import Section from './Section.jsx';

function App() {
  const [count, setCount] = useState(0)
  const onClick = () => {
    console.log('按钮被点击了');
    setCount((count) => count + 1)
    axios.get('/data.json').then((res) => {
      console.log(res.data);
    }).catch((err) => {
      console.error('请求失败', err);
    });
  }
  return (
    <>
      <div className="card">
        <button onClick={onClick}>
          count is {count}
        </button>
      </div>
      <div>
        <Button type="primary" onClick={onClick}>Button</Button>
      </div>
        <h1 className="text-3xl font-bold underline">
      	Hello world!
      </h1>
      <Counter></Counter>
      <Section>
        <Heading>主标题</Heading>
        <Section>
          <Heading>副标题</Heading>
          <Heading>副标题</Heading>
          <Heading>副标题</Heading>
          <Section>
            <Heading>子标题</Heading>
            <Heading>子标题</Heading>
            <Heading>子标题</Heading>
            <Section>
              <Heading>子子标题</Heading>
              <Heading>子子标题</Heading>
              <Heading>子子标题</Heading>
            </Section>
          </Section>
        </Section>
      </Section> 
    </>
  )
}

export default App
